<template>
	<view class="box">
		<view class="linear"></view>
		<!-- 正常订单 -->
		<template v-if="type == 1">
			<view class="listbg">
				<!-- 		<view class="cancelbox">
						<text>已取消</text>
						<text>该订单客户已经取消，这是一段取消原因显示，客户在订单倒计时内未支付，该订单已自动取消</text>
					</view> -->
				<!-- 售后订单 -->
				<template v-if="type == 2">
					<view class="cancelbox">
						<text>待处理-退款</text>
						<text>客户正在申请该商品的退款</text>
					</view>
				</template>
				<!-- 待配送 -->
				<template v-if="fromData.task_status == 3">
					<view class="" style="overflow: hidden;">
						<view class="addressbox topbox">
							<view class="add_r">
								<view class="add">
									<view class="shou">收</view>
									<text>{{fromData.user_address || '暂无地址'}}</text>
								</view>
								<view class="add">
									<view class="shou">取</view>
									<text>{{fromData.merchantField.marketField.address || '暂无菜市场'}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<view class="usualtitle">
							<text>配送信息</text>
						</view>
						<view class="beizu peisong">
							<view class="">
								<text>收货地址:</text>
								<text style="color: #333333;">{{fromData.real_name || '暂无'}}
									{{fromData.user_phone || '暂无'}}
									{{fromData.user_address || '暂无地址'}}</text>
							</view>
							<view class="">
								<text>配送时间:</text>
								<text>{{`${fromData.delivery_day || '**-**-**'} ${fromData.delivery_time_scope || '**:**'}`}}</text>
							</view>

						</view>
					</view>
				</template>

				<view class="user" v-if="fromData.task_status != 3">
					<view class=""><text>收货人:</text><text>{{fromData.real_name || '暂无'}}
							{{fromData.user_phone || '暂无'}}</text></view>
					<view class="" style="margin-top: 20rpx;margin-bottom: 20rpx;"><text>预约时间:</text><text
							class="hong">{{`${fromData.delivery_day || '**-**-**'} ${fromData.delivery_time_scope || '**:**'}`}}</text>
					</view>
					<view class=""><text>收货地址:</text><text class="hui">{{fromData.user_address || '暂无地址'}}</text></view>
				</view>

				<!-- 任务 -->
				<view class="" v-for="task in fromData.task">
					<view class="usualtitle">
						<text v-if="task.task_type ==1">买手信息</text>
						<text v-if="task.task_type ==2">骑手信息</text>
						<text v-if="task.task_type ==3">骑手信息 退货</text>
						<text v-if="task.task_type ==4">买手信息 换货</text>
						<text v-if="task.task_type ==5">骑手信息 换货</text>
						<view class="loc"></view>
					</view>
					<view class="buyer">
						<image :src="task.application.avatar" mode=""></image>
						<view class="">
							<view class="">
								<text>{{task.application.real_name || '暂无昵称'}}</text>
							</view>
							<view class="">
								<text>{{task.application.phone || '暂无手机号'}}</text>
							</view>
						</view>
						<view class="call" @click="tel(task.application.phone)">
							联系{{[1,4].indexOf(task.task_type) != -1 ?'买手':'骑手'}}</view>
					</view>
				</view>
				<!-- 骑手信息 -->
				<!-- <view class="" v-if="fromData.task[1]">
					<view class="usualtitle">
						<text>骑手信息</text>
						<view class="loc">
							<u-icon name="map" color="#F45E14" size="12"></u-icon><text>距买家0.3km</text>
						</view>
					</view>
					<view class="buyer">
						<image :src="fromData.task[1].application.avatar" mode=""></image>
						<view class="">
							<view class="">
								<text>{{fromData.task[1].application.real_name || '暂无昵称'}}</text>
							</view>
							<view class="">
								<text>{{fromData.task[1].application.phone || '暂无手机号'}}</text>
							</view>
						</view>
						<view class="call" @click="tel(fromData.task[1].application.phone)">联系骑手</view>
					</view>
				</view> -->
				<!-- 买手信息 -->
				<!-- <view class="" v-if="fromData.task[0]">
					<view class="usualtitle">
						<text>买手信息</text>
						<text v-if="fromData.buyer_type == 0">自动派单</text>
						<text v-if="fromData.buyer_type == 1">指定派单</text>
					</view>
					<view class="buyer">
						<image :src="fromData.task[0].application.avatar" mode=""></image>
						<view class="">
							<view class="">
								<text>{{fromData.task[0].application.real_name || '暂无昵称'}}</text>
								<text>{{fromData.task[0].application.phone || '暂无手机号'}}</text>
							</view>
							<view class="">
								<text>{{fromData.merchantField.marketField.mar_name || '暂无菜市场'}}</text>
								<text @click="tel(fromData.task[0].application.phone)">联系买手</text>
							</view>
						</view>
					</view>
				</view> -->
				<view class="goodslist" style="padding-bottom: 30rpx;">
					<view class="usualtitle">
						<text>{{fromData.merchantField.marketField.mar_name || '暂无菜市场'}}-{{fromData.merchantField.mer_name}}</text>
						<!-- <text>据买家1.0Km</text> -->
					</view>
					<view class="goodsbg">
						<view v-if="isTrue ? (i <= 2) : true" class="" v-for="(ele,i) in fromData.orderProduct"
							:key="i">
							<image :src="ele.cart_info.product.image" mode=""></image>
							<view class="itemrules">
								<view class="">
									<text>{{ele.cart_info.product.store_name}}</text><text>￥{{ele.cart_info.productAttr.ot_price || '0'}}</text><text>￥{{ele.cart_info.productAttr.price || '0'}}</text>
								</view>
								<text style="color: red;">{{ele.cart_info.productAttr.sku}}</text>
								<text>x{{ele.refund_num || '0'}}</text>
							</view>
						</view>
					</view>
					<view class="openline" @click="changeIs">
						<text>共{{fromData.orderProduct.length || '0'}}件</text>
						<image v-if="isTrue" src="../static/icon_297@2x.png" mode=""></image>
						<image v-else src="../static/icon_298@2x(1).png" mode=""></image>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_138@2x.png" mode=""></image>
							<text>积分抵现</text>
						</view>
						<text>-￥{{fromData.integral_price || '0'}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_139@2x.png" mode=""></image>
							<text>红包</text>
						</view>
						<text>-￥{{fromData.platform_free_money || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_139@2x.png" mode=""></image>
							<text>配送费红包</text>
						</view>
						<text>-￥{{fromData.total_free_postage_money_sum || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_141@2x.png" mode=""></image>
							<text>优惠券</text>
						</view>
						<text>-￥{{fromData.coupon_price || '0'}}</text>
					</view>
					<!-- <view class="youhui">
						<view class="">
							<image src="../static/icon_141@2x.png" mode=""></image>
							<text>礼品卡</text>
						</view>
						<text>-￥{{fromData.card_price || '0'}}</text>
					</view> -->
					<view class="realpay">
						<view class="" style="align-items: center;">已优惠<text> ￥{{alldiscounts || '0'}}</text></view>
						<view class="">实付金额￥<text>{{allmoney || '0'}}</text></view>
					</view>
					<view class="plus">
						<image src="../static/icon_148@2x.png" mode=""></image>
						<view class="">
							<image src="../static/vip.png" mode=""></image>
							<text> 尊贵的plus会员</text>
							<text v-if="fromData.vip_discount_money > 0"> | 为您节省￥{{fromData.vip_discount_money || ''}}</text>
							<text v-else> | 可为您节省￥{{fromData.order_total_vip_price|| ''}}</text>
						</view>
					</view>


				</view>
				<view class="">
					<view class="usualtitle">
						<text>备注</text>
					</view>
					<view class="beizu">
						<view class=""><text>{{fromData.mark || '暂无备注'}}</text></view>

					</view>
				</view>
				<view class="" v-if="fromData.task_status == 6">
					<view class="usualtitle">
						<text>取消原因</text>
					</view>
					<view class="beizu">
						<view class=""><text>订单倒计时未支付,订单自动取消</text></view>

					</view>
				</view>
				<view class="">
					<view class="usualtitle">
						<text>订单信息</text>
					</view>
					<view class="beizu">
						<view class="">
							<text>订单编号: {{fromData.order_sn || '暂无订单'}}</text>
							<text @click="copy(fromData.order_sn)">复制</text>
						</view>
						<view class=""><text>下单时间: {{fromData.create_time || '暂无下单时间'}}</text></view>

					</view>
				</view>
			</view>
		</template>
		<!-- 售后订单 -->
		<template v-if="type == 2">
			<view class="listbg">
				<!-- 售后订单 -->
				<!-- 处理中 -->
				<view class="cancelbox" v-if="fromData.status == 0 || fromData.status == 1 ||fromData.status == 2">
					<template v-if="fromData.refund_type ==1">
						<text>处理中-退款</text>
						<text>客户正在申请该商品的退款</text>
					</template>
					<template v-if="fromData.refund_type ==2">
						<text>处理中-退款退货</text>
						<text>客户正在申请该商品的退款退货</text>
					</template>
					<template v-if="fromData.refund_type ==3">
						<text>处理中-换货</text>
						<text>客户的订单正在申请退/换货，请准备好相应的货品</text>
					</template>
				</view>
				<!-- 已处理 审核未通过 -->
				<view class="cancelbox" v-if="fromData.status == -1">
					<template v-if="fromData.refund_type ==1">
						<text>已处理-退款失败</text>
						<text>{{fromData.fail_message || '暂无失败原因'}}</text>
					</template>
					<template v-if="2">
						<text>已处理-退款退货失败</text>
						<text>{{fromData.fail_message || '暂无失败原因'}}</text>
					</template>
					<template v-if="fromData.refund_type ==3">
						<text>处理中-退换货失败</text>
						<text>{{fromData.fail_message || '暂无失败原因'}}</text>
					</template>
				</view>
				<!-- 已处理 审核通过 -->
				<view class="cancelbox" v-if="fromData.status == 3">
					<template v-if="fromData.refund_type ==1">
						<text>已处理-退款成功</text>
						<text>客户的退款成功，钱钱款将由企业账户于3个工作日打款到客户的微信零钱</text>
					</template>
					<template v-if="fromData.refund_type == 2">
						<text>已处理-退款退货成功</text>
						<text>客户的退款成功，钱钱款将由企业账户于3个工作日打款到客户的微信零钱</text>
					</template>
					<template v-if="fromData.refund_type ==3">
						<text>已处理-退换货成功</text>
						<text>客户的售后订单已完成</text>
					</template>
				</view>
				<!-- xinxi -->
				<view class="user">
					<view class=""><text>收货人:</text><text>{{fromData.order.real_name || '暂无'}}
							{{fromData.order.user_phone || '暂无'}}</text></view>
					<view class="" style="margin-top: 20rpx;margin-bottom: 20rpx;"><text>预约时间:</text><text
							class="hong">{{`${fromData.order.groupOrder.delivery_day || '**-**-**'} ${fromData.order.groupOrder.delivery_time_scope || '**:**'}`}}</text>
					</view>
					<view class=""><text>收货地址:</text><text class="hui">{{fromData.order.user_address || '暂无地址'}}</text>
					</view>
				</view>
				<!-- 骑手信息 -->
				<view class="" v-if="fromData.RefundInfo && fromData.RefundInfo.rider">
					<view class="usualtitle">
						<text>骑手信息</text>
					</view>
					<view class="buyer">
						<image :src="fromData.RefundInfo.rider.avatar" mode=""></image>
						<view class="">
							<view class="">
								<text>{{fromData.RefundInfo.rider.real_name || '暂无昵称'}}</text>
							</view>
							<view class="">
								<text>{{fromData.RefundInfo.rider.phone || '暂无手机号'}}</text>
							</view>
						</view>
						<view class="call" @click="tel(fromData.RefundInfo.rider.phone)">联系骑手</view>
					</view>
				</view>
				<!-- 买手信息 -->
				<view class="" v-if="fromData.RefundInfo && fromData.RefundInfo.buyer ">
					<view class="usualtitle">
						<text>买手信息</text>
					</view>
					<view class="buyer">
						<image :src="fromData.RefundInfo.buyer.avatar" mode=""></image>
						<view class="">
							<view class="">
								<text>{{fromData.RefundInfo.buyer.real_name || '暂无昵称'}}</text>
								<text>{{fromData.RefundInfo.buyer.phone || '暂无手机号'}}</text>
							</view>
							<view class="">
								<text>{{fromData.RefundInfo.market.mar_name || '暂无菜市场'}}</text>
								<text @click="tel(fromData.RefundInfo.buyer.phone)">联系买手</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goodslist" style="padding-bottom: 30rpx;">
					<view class="usualtitle">
						<text>{{fromData.RefundInfo.market.mar_name || '暂无菜市场'}}-{{fromData.RefundInfo.merchant.mer_name}}</text>
						<!-- <text>据买家1.0Km</text> -->
					</view>
					<view class="goodsbg">
						<view>
							<image :src="fromData.refundProduct[0].product.cart_info.product.image" mode=""></image>
							<view class="itemrules">
								<view class="">
									<text>{{fromData.refundProduct[0].product.cart_info.product.store_name}}</text><text>￥{{fromData.refundProduct[0].product.cart_info.productAttr.ot_price || '0'}}</text><text>￥{{fromData.refundProduct[0].product.cart_info.productAttr.price || '0'}}</text>
								</view>
								<text style="color: red;">{{fromData.refundProduct[0].product.cart_info.productAttr.sku || ''}}</text>
								<text>x{{ele.refund_num || '0'}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="fromData.refund_type != 3">
					<view class="usualtitle">
						<text>退换货金额</text>
					</view>
					<view class="beizu">
						{{fromData.refund_price}}
					</view>
				</view>
				<view class="">
					<view class="usualtitle">
						<text>配送信息</text>
					</view>
					<view class="beizu peisong">
						<view class="">
							<text>收货地址:</text>
							<text
								style="color: #333333;">{{fromData.order.real_name || '暂无'}}{{fromData.order.user_phone || '暂无'}}{{fromData.order.user_address || '暂无地址'}}</text>
						</view>
						<view class="">
							<text>配送时间:</text>
							<text>{{`${fromData.order.groupOrder.delivery_day || '**-**-**'} ${fromData.order.groupOrder.delivery_time_scope || '**:**'}`}}</text>
						</view>

					</view>
				</view>

				<view class="">
					<view class="usualtitle">
						<text>申请原因</text>
					</view>
					<view class="beizu">
						<view class=""><text>{{fromData.refund_message || '暂无原因'}}</text></view>

					</view>
				</view>

				<view class="">
					<view class="usualtitle">
						<text>申请凭证</text>
					</view>
					<view class="imgs">
						<image v-for="(item1,index1) in pingzheng" :src="item1" :key="index1" mode=""></image>
					</view>
				</view>
				<view class="">
					<view class="usualtitle">
						<text>订单信息</text>
					</view>
					<view class="beizu">
						<view class="">
							<text>订单编号: {{fromData.refund_order_sn || '暂无订单'}}</text>
							<text @click="copy(fromData.refund_order_sn)">复制</text>
						</view>
						<view class=""><text>下单时间: {{fromData.create_time || '暂无下单时间'}}</text></view>

					</view>
				</view>

			</view>
		</template>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pingzheng: '',
				title: '', //退换货状态
				titleMsg: '', //信息
				alldiscounts: '0',
				allmoney: '0',
				isTrue: true, //控制展示数量
				type: '1', //订单类型 2是售后订单 
				id: '', //任务id
				moneyshow: false,
				realprice: '',
				fromData: {}, //订单详情
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				console.log(this.id, '任务id');
			} else {
				uni.showToast({
					title: '订单获取失败'
				})
				setTimeout(ele => {
					uni.navigateBack({
						delta: 1
					})
				}, 400)
			}
			if (e.type) {
				this.type = e.type
			}
		},
		onShow() {
			//正常订单
			if (this.type == 1) {
				this.getuserinfo();
			}
			//售后订单
			if (this.type == 2) {
				this.getshouhou();
			}
		},
		methods: {
			//获取订单列表 售后
			getshouhou() {
				this.$request('mer/refund/detail/' + this.id, {
					merLogin: '111'
				}, 'GET').then(res => {
					console.log(res, '订单详情 售后');
					if (res.status == 200) {
						this.fromData = res.data;
						// 状态名获取
						uni.setNavigationBarTitle({
							title: "售后详情"
						});
						console.log(this.fromData.images, 'kan')
						this.pingzheng = this.fromData.images;
						console.log(this.pingzheng, 'kan')
					}
				})
			},
			copy(text) {
				uni.setClipboardData({
					data: `${text}`,
					success: function() {}
				});
			},
			changeIs() {
				this.isTrue = !this.isTrue;
			},
			tel(number) {
				uni.makePhoneCall({
					phoneNumber: `${number}` //仅为示例
				});
			},
			//获取订单列表
			getuserinfo() {
				this.$request('mer/order/details', {
					order_id: this.id,
					merLogin: '111'
				}, 'GET').then(res => {
					console.log(res, '订单详情');
					if (res.status == 200) {
						this.fromData = res.data;
						console.log(this.fromData)
						this.alldiscounts = this.fromData.total_free_money_sum;
						this.allmoney = this.fromData.pay_price;
						console.log(this.allmoney)
						// 状态名获取
						switch (res.data.task_status * 1) {
							case 1:
								return uni.setNavigationBarTitle({
									title: "待帮买"
								});
							case 2:
								return uni.setNavigationBarTitle({
									title: "已帮买"
								});
							case 3:
								return uni.setNavigationBarTitle({
									title: "待配送"
								});
							case 4:
								return uni.setNavigationBarTitle({
									title: "待送达"
								});
							case 5:
								return uni.setNavigationBarTitle({
									title: "已送达"
								});
							case 6:
								return uni.setNavigationBarTitle({
									title: "已取消"
								});
						}
						// let allmoney = 0;
						// let alldiscounts = 0;
						// this.fromData.orderProduct.forEach((e, i) => {
						// 	allmoney += e.cart_info.productAttr.price * 1
						// 	alldiscounts += e.cart_info.productAttr.ot_price * 1 - e.cart_info.productAttr
						// 		.price * 1
						// })

					}
				})
			},
			getrealprice() {
				this.moneyshow = true
			},
			sure() {
				this.moneyshow = false
			},

		}
	}
</script>

<style>
	.box {
		padding-bottom: 20rpx;
	}

	.imgs {
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 0;
	}

	.imgs>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
		/* background: #18BC37; */
		margin-bottom: 20rpx;
	}

	.imgs>image:nth-of-type(3n+1) {
		margin-left: 0;
	}

	.pstime {
		height: 84rpx;
		width: 100%;
		/* overflow: hidden; */
		/* margin-left: 30rpx; */
		position: relative;
	}

	.pstime .lring {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		left: -14rpx;
		top: -14rpx;
	}

	.pstime .rring {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		right: -14rpx;
		top: -14rpx;
	}

	.pstime .time {
		border-top: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		width: 630rpx;
		height: 100%;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
	}

	.pstime .time text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F45E14;
	}

	.topbox {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	/* 	.qu {
		color: #F45E14 !important;
		background: #FFE8DC !important;
	} */
	.addressbox {
		display: flex;
		width: 690rpx;
		margin-left: 20rpx;
		overflow: hidden;
	}

	.add_r {
		flex: 1;
		margin-left: 12rpx;
	}

	.add {}

	.add_r>view {
		display: flex;
	}

	.add_r>view:nth-of-type(2) {
		margin-top: 30rpx;
	}

	.add_r>view text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		width: 480rpx;
	}

	.add_r>view image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 50rpx;
	}

	.add_l {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 8rpx;
	}

	.add_l>view {
		width: 44rpx;
		height: 26rpx;
		background: #D6FFF5;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #109C7A;
	}

	.shou {
		margin-top: 6rpx;
		margin-right: 20rpx;
		width: 44rpx;
		height: 26rpx;
		background: #D6FFF5;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #109C7A;
	}

	.add_l>text {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
	}

	.topbox {
		box-sizing: border-box;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.cancelbox {
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-sizing: border-box;
		width: 690rpx;
		padding: 30rpx;
		position: relative;
		z-index: 5;
	}

	.cancelbox text:nth-of-type(1) {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.call {
		width: 124rpx !important;
		height: 44rpx;
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 22rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		position: absolute;
		right: 30rpx;
	}

	.loc {
		display: flex;
		align-items: center;
	}

	.loc text {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		margin-left: 8rpx;
	}

	.plus {
		width: 630rpx;
		height: 88rpx;
		position: relative;
		margin-left: 30rpx;
		margin-top: 6rpx;
		display: flex;
		align-items: flex-end;
	}

	.plus>view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #4D2F12;
		position: relative;
		z-index: 2;
		margin-bottom: 20rpx;
		margin-left: 14rpx;
	}

	.plus>view image {
		width: 30rpx;
		height: 30rpx;
	}

	.plus>view text {
		margin-left: 6rpx;
	}

	.plus>view text:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #4D2F12;
	}

	/* 	<view class="plus">
		<image src="../static/icon_148@2x.png" mode=""></image>
			<view class="">
				<image src="../static/vip.png" mode=""></image>
				<text>成为plus会员</text>
				<text>| 可为您节省￥15.08</text>
			</view>
	</view> */

	.plus>image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.realpay {
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 60rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.realpay>view {
		display: flex;
		align-items: baseline;
	}

	.realpay>view:nth-of-type(1) text {
		font-size: 34rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.realpay>view:nth-of-type(2) text {
		font-size: 40rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;

	}

	.youhui>view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui>view image {
		width: 28rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}

	.youhui>text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.openline {
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		background: #FAFAFA;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.openline>image {
		width: 16rpx;
		height: 10rpx;
	}

	.goodsbg>view {
		height: 170rpx;
		border-bottom: 1rpx solid #EEEEEE;
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.priceipt {
		position: absolute;
		width: 174rpx;
		height: 50rpx;
		background: #FFFFFF;
		border: 1rpx solid #FFCBB1;
		border-radius: 25rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		right: 0rpx;
		bottom: 10rpx;
	}

	.goodsbg>view:last-child {
		border-bottom: none;
	}

	.goodsbg>view>image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 12rpx;
		/* background: #18BC37; */
		margin-right: 16rpx;
	}

	.itemrules {
		display: flex;
		flex-direction: column;
	}

	.itemrules>text {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 30rpx;
	}

	.itemrules>view {
		display: flex;
		align-items: center;
	}

	.itemrules>view>text:nth-of-type(1) {
		width: 280rpx;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.itemrules>view>text:nth-of-type(2) {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-decoration: line-through;
		color: #999999;
		line-height: 6rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.itemrules>view>text:nth-of-type(3) {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.itemrules {}

	/* 	<view class="">
		<image src="" mode=""></image>
		<view class="itemrules">
			<view class=""><text>饱满海南香蕉饱满海南香蕉</text><text>￥18.0</text><text>￥18.0</text></view>
			<text>香甜软糯，回味无穷，一口爱上</text>
			<text>x1</text>
		</view>
	</view> */

	.recive {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		z-index: 99;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.beizu {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
		line-height: 40rpx;
	}

	.beizu>view {
		display: flex;
		justify-content: space-between;
	}

	.beizu>view text:nth-of-type(2) {
		color: #FC9448;
	}

	.beizu>view:nth-of-type(2) {
		margin-top: 16rpx;
	}

	.peisong {}

	.peisong>view text:nth-of-type(2) {
		color: #FC9448;
		width: 500rpx;
	}

	.buyer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx;
		position: relative;
	}

	.buyer>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		/* background: #18BC37; */
		margin-right: 16rpx;
	}

	.buyer>view {
		flex: 1;
	}

	.buyer>view>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buyer>view>view:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) text:nth-of-type(2) {
		color: #F83535;
	}

	.usualtitle {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.usualtitle text:nth-of-type(2) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;

	}

	.user {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.user>view {
		display: flex;
	}

	.user text:nth-of-type(1) {
		width: 140rpx;
		white-space: nowrap;
	}

	.hong {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F83535;
	}

	.hui {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #666666;
		width: 500rpx;
	}

	.listbg {
		width: 690rpx;
		margin-left: 30rpx;
		position: relative;
		z-index: 3;
		padding-top: 50rpx;
	}

	.listbg>view {
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	page {
		background: #F5F5F5;
	}

	.ipts {
		width: 620rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.linear {
		width: 750rpx;
		height: 280rpx;
		background: linear-gradient(180deg, #109C7A 0%, #F5F5F5 100%);
		position: fixed;
		top: 0;
	}

	.ipts>text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		line-height: 34rpx;
	}

	.ipts input {
		width: 572rpx;
		height: 120rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding-left: 16rpx;
		margin-bottom: 42rpx;
		margin-top: 46rpx;
	}

	.ipts textarea {
		width: 572rpx;
		height: 120rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding-left: 16rpx;
		margin-bottom: 42rpx;
		margin-top: 46rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		padding-top: 10rpx;
	}

	.playbtn {
		width: 100%;
		display: flex;
		height: 90rpx;
		border-top: 1rpx solid #EEEEEE;
	}

	.playbtn>view {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
		display: flex;
		width: 50%;
		height: 100%;
		align-items: center;
		justify-content: center;
	}

	.playbtn>view:nth-of-type(2) {
		border-left: 1rpx solid #EEEEEE;
		color: #F31E1E;

	}

	.tworecive {
		background: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		height: 140rpx;
		padding-right: 60rpx;
	}

	.tworecive>view {
		width: 220rpx;
		height: 90rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.tworecive>view:nth-of-type(2) {
		color: #FFFFFF;
		width: 220rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		margin-left: 30rpx;
	}
</style>
